<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录与注册</title>
    <script src="js/jquery/jquery-3.4.1.min.js"></script>
</head>
<style>
    body{
        background-color: steelblue;;
    }
    .img{
        margin: 0 0 10px 0;
        width:150px;
        height: 150px;
    }
    .main{
        margin: auto;
        width:600px;
        height: 600px;
    }
    .title{
        font-size: 36px;
        margin: 0 0 20px 0;
        color: antiquewhite;
        text-align: center;
        line-height: 100px;
    }
    .describe{
        font-size: 24px;
        margin: 0 0 20px 0;
        color: antiquewhite;
        text-align: center;
        line-height: 30px;
    }
    .button{
        background: none;
        border: 1px solid white;
        color: white;
        width: 100px;
        height: 50px;
        font-size: 24px;
        cursor: pointer;
        border-radius: 6px;
    }
    .buttonRegister{
        margin-left: 50px;
    }

    .modal {
        display: none; /* 默认隐藏 */
        position: fixed;
        z-index: 1;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    /* 弹窗内容 */
    .modal-content {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        padding: 0;
        border: 1px solid gray;
        width: 50%;
        box-shadow:0 6px 20px gray;
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
    }

    /* 关闭按钮 */
    .close {
        color: gray;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover, .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    .modal-header {
        padding: 2px 16px;
        /*background-color: #5cb85c;*/
        color: black;
        border-bottom: 1px solid gray;
    }

    .modal-body {
        padding: 2px 16px;
        line-height: 10px;
    }

    .user{
        height: 30px;
        padding: 3px;
        width: 300px;
        border: 1px solid gray;
        text-shadow: gray;
        border-radius: 3px;
        vertical-align: middle;
    }

    .user:focus{
        border: 1px solid deepskyblue;
        outline: none;
    }

    .check{
        margin-top: 20px;
    }
    .btnLog{
        margin-top: 20px;
        margin-bottom: 20px;
        width: 30%;
        height: 40px;
        cursor: pointer;
        background-color: lightskyblue;
        border: 1px solid gray;
        border-radius: 5px;
        font-size: 20px;
    }

    .forms-group {
        margin-top: 15px;
        display: block;
    }

    .label-group{
        position: relative;
        display: inline-block;
        width:100px;
        text-align:right;
    }

</style>
<body>
<div class="main">
    <div style="text-align: center"><img src="img/文件夹.png" alt="" class="img"/></div>
    <div class="title">快速创建收件夹</div>
    <div class="describe">用于向多人收取文件</div>
    <div class="describe">文件将保存在你的网盘中</div>
    <div style="text-align: center;margin-top: 50px">
        <button class="button" id="log">登录</button>
        <!-- 弹窗 -->
        <div id="logModal" class="modal">

            <!-- 弹窗内容 -->
            <div class="modal-content">
                <div class="modal-header">
                    <span class="close">&times;</span>
                    <h2>登录</h2>
                </div>
                <div class="modal-body">
                    <form th:method="post" th:action="@{/check_password}" th:object="${user}" id="loginForm">
                        <div class="forms-group">
                            <input type="text" th:field="*{userName}" placeholder="用户名" required="required" class="user" id="userName1">
                        </div>
                        <div class="forms-group">
                            <input type="text" th:field="*{password}" placeholder="登录密码" required="required" class="user" id="password1">
                        </div>
                        <div class="check">
                            <input type="checkbox" th:field="*{remember}" id="remember"><label for="remember">记住我一周</label>
                            <!-- todo href -->
                            <a href="/to_change_password" style="margin-left: 20px;text-decoration: none">找回密码</a><br>
                            <input type="button" value="登录" class="btnLog" id="loginBut">
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <button class="button buttonRegister" id="register">注册</button>
        <!-- 弹窗 -->
        <div id="regModal" class="modal">
            <!-- 弹窗内容 -->
            <div class="modal-content">
                <div class="modal-header">
                    <span class="close">&times;</span>
                    <h2>注册</h2>
                </div>
                <div class="modal-body">
                    <form th:method="post" th:action="@{/register}" th:object="${user}" id="registerForm">
                        <div class="forms-group">
                            <label for="email" class="label-group">登录邮箱：</label>
                            <input type="text" th:field="*{email}" placeholder="邮箱地址(注册后不能修改)" required="required" class="user" id="email"/>
                            <span id="span1" style="color: red"></span>
                        </div>
                        <div class="forms-group">
                            <label for="userName" class="label-group">用户名：</label>
                            <input type="text" th:field="*{userName}" placeholder="用户名(注册后不能修改)" required="required" class="user" id="userName">
                            <span id="span2" style="color: red"></span>
                        </div>
                        <div class="forms-group">
                            <label for="password" class="label-group">密码：</label>
                            <input type="password" th:field="*{password}" placeholder="请填写6-16位密码,至少包含数字和字母" required="required" class="user" id="password">
                            <span id="span3" style="color: red"></span>
                        </div>
                        <div class="forms-group">
                            <label for="passwordTwo" class="label-group">确认密码：</label>
                            <input type="password" placeholder="请再次输入密码" required="required" class="user" id="passwordTwo"/>
                            <span id="span4" style="color: red"></span>
                        </div>
                        <div class="forms-group">
                            <label for="code" class="label-group">验证码：</label>
                            <input type="text" placeholder="请输入邮箱收到的验证码" required="required" class="user" id="code">
                            <span id="span5" style="color: red"></span>
                        </div>
                        <div class="forms-group">
                            <input type="button" value="发送验证码" class="btnLog" id="sendCode">
                            <input type="button" value="注册" class="btnLog" id="registerBut">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script>

    // 获取弹窗
    var modal1 = document.getElementById("logModal");
    var modal2 = document.getElementById("regModal");

    // 打开弹窗的按钮对象
    var btn1 = document.getElementById("log");
    var btn2 = document.getElementById("register");

    // 获取 <span> 元素，用于关闭弹窗 that closes the modal
    var span = document.getElementsByClassName("close")[0];
    var span2 = document.getElementsByClassName("close")[1];

    // 点击按钮打开弹窗
    btn1.onclick = function() {
        modal1.style.display = "block";
    }
    btn2.onclick = function () {
        modal2.style.display = "block";
    }

    // 点击 <span> (x), 关闭弹窗
    span.onclick = function() {
        modal1.style.display = "none";
    }
    span2.onclick = function() {
        modal2.style.display = "none";
    }

    // 在用户点击其他地方时，关闭弹窗
    window.onclick = function(event) {
        if (event.target == modal1 || event.target == modal2) {
            modal1.style.display = "none";
            modal2.style.display = "none";
        }
    }

    $(function () {
        $('#email').focusout(function () {
            var email = $('#email').val()
            var span = document.getElementById('span1')
            // 常用的邮箱格式 abc@def.xyz
            var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
            if (email == null || email == ""){
                span.style.color='red'
                span.innerText="请输入邮箱"
            }else if(!reg.exec(email)){
                span.style.color='red'
                span.innerText="请填写正确邮箱格式"
            }else {
                span.style.color='green'
                span.innerText="格式正确"
            }
        })

        $('#userName').focusout(function () {
            var name = $('#userName').val()
            var span = document.getElementById('span2')
            $.ajax({
                type:"POST",
                data:{name:name},
                url:"/check_name",
                success(res) {
                    if (res["res"]==0){
                        span.style.color='red'
                        span.innerText="用户已存在"
                    }else{
                        span.style.color='green'
                        span.innerText="可使用"
                        if (name == null || name == ""){
                            span.style.color='red'
                            span.innerText="请输入用户名"
                        }
                    }
                }
            })
            if (name == null || name == ""){
                span.style.color='red'
                span.innerText="请输入用户名"
            }
        })

        $('#password').focusout(function () {
            var psw = $('#password').val();
            var span = document.getElementById('span3')
            // 密码的正则匹配，需要至少包含字母、数字，长度6-16
            var reg = /^(?=.*[a-zA-Z])(?=.*\d).{6,16}$/
            if (psw == null || psw==""){
                span.style.color='red'
                span.innerText="请输入密码"
            }else if (reg.exec(psw)){
                span.style.color='green'
                span.innerText=""
            }else{
                span.style.color='red'
                span.innerText="格式错误"
            }
        })

        $('#passwordTwo').focusout(function () {
            var pswOne = $('#password').val();
            var pswTwo = $('#passwordTwo').val();
            var span = document.getElementById('span4')
            if (pswOne!=pswTwo){
                span.style.color='red';
                span.innerText="两次密码不一致"
            }else{
                span.style.color='green';
                span.innerText=""
            }
        })

        $('#code').focusout(function () {
            var code = $('#code').val()
            var span = document.getElementById('span5')
            if (code == null || code ==""){
                span.style.color='red'
                span.innerText="请输入验证码"
            }else{
                span.style.color='green'
                span.innerText=""
            }
        })

        //当所有信息都符合要求才可以提交表单
        $('#registerBut').click(function () {
            var span1 = document.getElementById('span1')
            var span2 = document.getElementById('span2')
            var span3 = document.getElementById('span3')
            var span4 = document.getElementById('span4')
            var span5 = document.getElementById('span5')
            if (span1.style.color == 'green' && span2.style.color == 'green' && span3.style.color == 'green'
            && span4.style.color == 'green' && span5.style.color == 'green'){
                var email = $('#email').val()
                var code = $('#code').val()
                $.ajax({
                    // 以Post方式请求
                    type: "POST",
                    // 请求的链接
                    url: "/check_code",
                    // 请求带的消息体
                    data: {
                        code:code,
                        email:email,
                    },
                    // 请求成功后的回调
                    success:function (res) {
                        if (res["res"]==200){
                            // 结果成功了，可以下一步
                            document.getElementById('registerForm').submit()
                        }else{
                            alert("验证码错误")
                        }
                    }
                })
            }else{
                alert("请检查注册内容")
            }
        })
        
        $('#sendCode').click(function () {
            var email = $('#email').val()
            $.ajax({
                type: "POST",
                url: "/send_code",
                data: {
                    email:email,
                },
                success:function (res) {
                    if (res["res"]==200){
                        alert("发送成功")
                    }
                }
            })
        })

        $('#loginBut').click(function () {
            var user = $('#userName1').val()
            var password = $('#password1').val()
            $.ajax({
                type: "POST",
                url: "/check_password2",
                data: {
                    user:user,
                    password:password,
                },
                success:function (res) {
                    if (res["res"]==200){
                        document.getElementById('loginForm').submit()
                    }else{
                        alert("密码错误")
                    }
                }
            })
        })

    })
</script>
</html>